<template>
	<div>
		<router-link to="/" class="header-ads" v-show="showHeader">
			<div class="iconfont back-icon header-left">&#xe624;</div>
		</router-link>
		<div class="header" v-show="!showHeader" :style="styleOpacity">
			<div class="headerCity">
				景点详情
			    <router-link to="/">
			    	<div class="iconfont back-icon header-left">&#xe624;</div>
			    </router-link>
		    </div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'detailHeader',
		data(){
			return{
				showHeader:true,
				styleOpacity:{
					opacity:0
				}
			}
		},
		//在全局上写的监听事件一定要清空
		activated(){
			window.addEventListener('scroll',this.handleScroll)
		},
		deactivated(){
			window.removeEventListener('scroll',this.handleScroll)
		},
		methods:{
			handleScroll(){
				const top=document.documentElement.scrollTop
				if (top>60) {
					let opacity=top /350
					opacity=opacity > 1 ? 1 : opacity
					this.styleOpacity={opacity}
					this.showHeader=false
				}else{
					this.showHeader=true
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../../assets/styles/varibles.styl'
	.header-ads
		width:.8rem
		height:0.8rem
		position:fixed
		top:0.2rem
		left:0.2rem
		background:rgba(0,0,0,0.8)
		border-radius:100%
		line-height:0.8rem
		text-align:center
		.header-left
			color:#fff
			font-size:0.3rem
	.headerCity
		position:fixed
		top:0
		left:0
		width:100%
		background:$bgColor
		height:$headerHeight
		line-height:$headerHeight
		text-align:center
		color:$color
		.header-left
			position:absolute
			top:0
			left:0rem
			color:$color
			width:0.64rem
			font-size:0.4rem
			text-align:center
</style>